<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>글목록</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
//방명록 등록
function content_submit(){
	var f=document.write_form;
	f.command.value="write";
	if("${sessionScope.vo}"==""){ //로그인 안하면 로그인 페이지로 ㄱㄱ
		alert("로그인 하신 후에 이용하실 수 있습니다!");
		location.href="${pageContext.request.contextPath }/member_view/login.jsp";
		return;
	}
	if(f.content.value==""){
		alert("내용을 입력하세요!");
		f.content.focus();
		return;
	}
	f.submit();
}

//삭제
function deleteBoard(content_no){
	 var f=document.write_form;
	f.command.value="deleteBoard";
	f.no.value=content_no;
	var flag=confirm("메모를 삭제하시겠습니까?");
	if(flag){
	f.submit();
	}
	
}
//수정 버튼 클릭시~
function modify(sub_content_no,b_no,pageNo){
	var f=document.write_form;
	var flag=confirm("메모를 수정하시겠습니까??");
	if(flag){
			$.ajax({
				type:"POST",
				url:"board.do",
				data:"command=modifylist&board_no="+b_no+"&pageNo="+pageNo,
				dataType:"json",
				success:function(modify){	
					var table="";
					table+="<table border='0' width='750' cellpadding='2' >";
					table+="<tr><th width='10%'>번호</th>";
					table+="<th width='50%'>내용</th>";
					table+="<th></th>";
					table+="<th width='10%'>작성자</th>";
					table+="<th width='15%' >작성일</th></tr>";
					$.each(modify.lvo.list,function(i,modify){
						if(modify.sub_content_no==sub_content_no){//수정하려는 번호가 같으면 readOnly 없이 생성
						table+="<tr><td align='center'>"+modify.sub_content_no+"</td>";
						table+="<td><textarea cols='45' rows='2' name='content2'id='content2' style='resize:none;' >"+modify.content+"</textarea></td>";
						table+="<td align='center'>";
						table+="<a onclick='guestUpdateBoard("+modify.content_no+","+modify.board_no+",${requestScope.lvo.pagingBean.nowPage})' style='cursor:pointer;cursor:hand;'><img src='img/memobutton.png'></a><br>";
						table+="<a onclick='deleteBoard("+modify.content_no+")'><font size='2' color='red' style='cursor:pointer;cursor:hand;'>삭제</font></a>|";
						table+="<a onclick='canceled("+modify.board_no+",${requestScope.lvo.pagingBean.nowPage})' style='cursor:pointer;cursor:hand;'>";
						table+="<font size='2' color='red'> 취소</font></a></td>";
						table+="<td align='center'>"+modify.nick+"</td>";
						table+="<td align='center'>"+modify.writeDate+"</td>";
						table+="<tr><td colspan='5'><img src='img/dottedline.png' width='750'></td></tr>";
						}else{//나머지
							table+="<tr><td align='center'>"+modify.sub_content_no+"</td>";
							table+="<td>"+modify.content+"</textarea></td>";
							table+="<td align='center'><c:if test='${"+modify.id+"== sessionScope.vo.id || sessionScope.vo.id==admin}'></c:if>";
							table+="<a onclick='modify("+modify.sub_content_no +","+modify.board_no+",${requestScope.lvo.pagingBean.nowPage})' style='cursor:pointer;cursor:hand;'>";
							table+=" <font size='2'>수정</font></a> l ";
							table+="<a onclick='deleteBoard("+modify.content_no+")'><font size='2' color='red' style='cursor:pointer;cursor:hand;'>삭제</font></a></td>";
							table+="<td align='center'>"+modify.nick+"</td>";
							table+="<td align='center'>"+modify.writeDate+"</td></tr>";
							table+="<tr><td colspan='5'><img src='img/dottedline.png' width='750'></td></tr>";
						}
					}); 
					$("#modifylist").html(table);
				}
			});
			}
		}
//수정 중 확인버튼 클릭시
function guestUpdateBoard(content_no,board_no,pageNo){
	var f=document.write_form;
	if($("#content2").val()==""){
		alert("내용을 입력하세요!");
		return;
	}
	var flag=confirm("메모를 하시겠습니까?");
	if(flag){
		location.href="${pageContext.request.contextPath }/board.do?command=guestUpdateBoard&no="+content_no+"&kind=guest&board_no="+board_no+"&pageNo="+pageNo+"&content="+$("#content2").val();
		} 
}
//취소
function canceled(b_no,pageNo){
	var flag=confirm("메모를 취소하시겠습니까?");
	if(flag){
	location.href="${pageContext.request.contextPath }/board.do?command=list&kind=guest&board_no="+b_no+"&pageNo="+pageNo;
	}
}
</script>
<!--A=>링크 색상 A.n=>링크 색상 -->
<style type="text/css"> 
A:link {text-decoration:none; color:black;} 
A:visited {text-decoration:none; color:black;} 
A:hover {text-decoration:underline; color:#5a5a5a;}

A.n:link {text-decoration:none; color:black;} 
A.n:visited {text-decoration:none; color:black;} 
A.n:hover {text-decoration:underline; color:#FF8200;}
</style>
</head>
<body >
<!-- 타이틀 이미지 -->
<table width="760"  height="78" background="img/board/title.jpg">
		<tr>
			<td>
				<font color="green">
					<b>&nbsp;&nbsp;&nbsp;${requestScope.lvo.boardName }
					</b>
				</font>
			</td>
		</tr>
	</table>
	<br>
	<!-- 글작성 폼 -->
<form action="board.do" method="post" name="write_form"  enctype="multipart/form-data">
	<input type="hidden" name="command" value="">
	<input type=hidden name="no" id="no" value="${bvo.content_no }">
	<input type="hidden" name="id" value="${sessionScope.vo.id }">
	<input type="hidden" name="nick" value="${sessionScope.vo.nick }">
	<input type="hidden" name="board_no" value=${param.board_no }>
	<input type="hidden" name="kind" value="guest">
	<table bgcolor="#4BAF4B">
		<tr>
			<td colspan="2">
				<textarea cols="79" rows="2" name="content" style="resize:none;"></textarea>
			</td>
			<td colspan="2"  >
				<a onclick="content_submit()" style='cursor:pointer;cursor:hand;'><img src="img/memobutton.png"></a>
			</td>  
		</tr> 
	</table>
</form>
<!-- 방명록 리스트 -->
<span id="modifylist">
	<table width="750" cellpadding="2">
		<tr>
			<th width="10%">번호</th>
			<th width="50%">내용</th>
			<th></th>
			<th width="10%">작성자</th>
			<th width="15%" >작성일</th>
		</tr>		
		<c:forEach var="bvo" items="${requestScope.lvo.list}">		
			<tr>
			    <td align="center">${bvo.sub_content_no }</td>				
				<td>${bvo.content }</td>
					 <td align="center">
					 <c:if test="${bvo.id == sessionScope.vo.id || sessionScope.vo.id=='admin'}">
					<!-- 수정  -->
					 <a onclick="modify('${bvo.sub_content_no }','${bvo.board_no }','${requestScope.lvo.pagingBean.nowPage}')" style='cursor:pointer;cursor:hand;'> 
					 <font size="2">수정</font></a> l 
					<!-- 삭제 -->
					 <a onclick="deleteBoard('${bvo.content_no }')" style='cursor:pointer;cursor:hand;'><font size="2" color="red">삭제</font></a>
					 </c:if>
				</td>
				<td align="center">${bvo.nick }</td>
				<td align="center">${bvo.writeDate }</td>	
			</tr>
			<tr><td colspan="5"><img src="img/dottedline.png" width="750"></td></tr>
		</c:forEach>
	</table>
</span>
	<table align="center">
		<td>
			<!-- 페이징 처리 -->	
			<%-- 이전 페이지 그룹이 있으면 이미지 보여준다.
				   이미지 링크는 현 페이지 그룹 시작페이지 번호 -1 =>
				   이전 페이지 그룹의 마지막 페이지 번호로 한다. 
			 --%>
			 <c:if test="${requestScope.lvo.pagingBean.previousPageGroup}">
			 <a href="board.do?command=list&board_no=${param.board_no }&pageNo=${requestScope.lvo.pagingBean.
			 startPageOfPageGroup-1}&kind=${param.kind }"><img src="img/board/left_arrow_btn.png"></a>
			 </c:if>
			 &nbsp;&nbsp;
			<%-- PagingBean 을 이용해서 현재 페이지에 해당되는 페이지그룹의
				   시작페이지~~마지막페이지까지 화면에 보여준다. 
				   이 때 현재 페이지를 제외한 나머지 페이지는 링크를 걸어
				   해당 페이지에 대한 게시물 리스트 조회가 가능하도록 한다. 
			 --%>	
			<c:forEach var="i" 
			begin="${requestScope.lvo.pagingBean.startPageOfPageGroup}"
			 end="${requestScope.lvo.pagingBean.endPageOfPageGroup}">
			 <c:choose>
			 <c:when test="${requestScope.lvo.pagingBean.nowPage!=i}">
			 <a class="n" href="board.do?command=list&board_no=${param.board_no }&pageNo=${i}&kind=${param.kind }">${i}</a>
			 </c:when>
			 <c:otherwise>
			<b><font color="#DB631F" style="text-decoration: underline;">${i}</font></b>
			</c:otherwise>
			</c:choose>
			</c:forEach>	 
			&nbsp;&nbsp;
			<%-- 다음 페이지 그룹이 있으면 화살표 이미지를 보여준다.
					이미지 링크는 현재 페이지 그룹의 마지막 번호 + 1 => 
					다음 그룹의 시작 페이지로 링크한다. 
					right_arrow_btn.gif
			 --%>
			 <c:if test="${requestScope.lvo.pagingBean.nextPageGroup}">
			 <a href=
			 "board.do?command=list&board_no=${param.board_no }&pageNo=${requestScope.lvo.pagingBean.
			 endPageOfPageGroup+1}&kind=${param.kind }">
			 <img src="img/board/right_arrow_btn.png">
			 </a>
			 </c:if>
	 	</td>
	 </table>
  
</body>
</html>